<template>
  <header>
    <div class="left">
        <img class="logo" src=".././assets/logo.png">
        航天科工合同监管应用平台
    </div>
    <div class="right">
        <ul> <li v-for="(item,name) in menus" @click="go(item.path)">{{item.name}}</li></ul>
        <div class="login" @click="login">登录</div>   
    </div>
   
  </header>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      menus: [{
          name:"首页",
          path:"/"
      },{
          name:"监管场景",
          path:"/jkcj"
      },{
          name:"合同监管大屏",
          path:"/htjgdp"
      },{
          name:"重点关注",
          path:"/zdgz"
      },{
          name:"监管申请",
          path:"/jgsq"
      }]
    }
  },
  methods:{
      go(path){
          this.$router.push({
              path:path
          })
      },
      login(){
          this.$router.push({
              path:"/login"
          })
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
    height:60px;
    background:#fff;
    overflow:hidden;
}
.left{
    height:60px;
    line-height:60px;
    width:36.25%;
    float:left;
    background:#fff;
    color:rgb(90,150,294);
    font-size:18px;
    vertical-align:middle;
    font-weight:bold;
}
.left .logo{
    display:inline-block;
    height:40px;
    margin:10px 10px 10px 30px;
    width:auto;
    vertical-align:middle;
}
.right{
    width:63.75%;
    float:left;
    padding-left:80px;
    display:flex;
    justify-content: space-between;
    background:linear-gradient(to right, rgb(80,108,251) 0%,rgb(90,167,249,.75) 100%);
    position:relative;
}
.right:after{
    content: "";
    width: 120px;
    height: 120px;
    position: absolute;
    top: -60px;
    left: -60px;
    background: #fff;
    z-index: 6;
    transform: rotate(45deg);
}
.right ul{
    height:60px;
    overflow:hidden;
    list-style:none;
    margin:0;
}
.right ul li{
    float:left;
    color:#fff;
    height:60px;
    line-height:60px;
    font-size:14px;
    margin-right:95px;
    cursor:pointer;
    transition:all ease 500ms;
}
.right ul li:hover{
    font-size:16px;
    font-weight:bold;
}
.right ul li:last-child{
    margin:0;
}
.login{
    color:#fff;
    height:60px;
    line-height:60px;
    padding:0 30px;
    font-size:14px;
    cursor:pointer;
}
</style>
